<template>
  <div class="user-home">
    <el-row :gutter="20">
      <!-- 用户信息卡片 -->
      <el-col :span="8">
        <el-card shadow="hover" class="user-card">
          <div class="user-info">
            <el-avatar :size="64" :icon="User" />
            <h2>{{ userInfo.username }}</h2>
            <p>{{ userInfo.email }}</p>
          </div>
          <div class="user-stats">
            <div class="stat-item">
              <span class="label">注册时间</span>
              <span class="value">{{ userInfo.createTime }}</span>
            </div>
            <div class="stat-item">
              <span class="label">上次登录</span>
              <span class="value">{{ userInfo.lastLoginTime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 功能卡片 -->
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="12" v-for="(item, index) in features" :key="index">
            <el-card shadow="hover" class="feature-card" @click="handleFeatureClick(item)">
              <el-icon :size="32" :color="item.color">
                <component :is="item.icon" />
              </el-icon>
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-card shadow="hover" class="mt-4">
      <template #header>
        <div class="card-header">
          <span>最近活动</span>
          <el-button type="primary" link>查看全部</el-button>
        </div>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in recentActivities"
          :key="index"
          :timestamp="activity.time"
          :type="activity.type"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  User,
  Document,
  Setting,
  Bell
} from '@element-plus/icons-vue'
import axios from 'axios'

const router = useRouter()

// 用户信息
const userInfo = ref({
  username: '加载中...',
  email: '加载中...',
  createTime: '加载中...',
  lastLoginTime: '加载中...'
})

// 功能列表
const features = ref([
  {
    title: '我的文档',
    description: '查看和管理您的文档',
    icon: 'Document',
    color: '#409EFF',
    route: '/documents'
  },
  {
    title: '消息通知',
    description: '查看系统通知和消息',
    icon: 'Bell',
    color: '#67C23A',
    route: '/notifications'
  },
  {
    title: '个人设置',
    description: '修改个人信息和偏好设置',
    icon: 'Setting',
    color: '#E6A23C',
    route: '/settings'
  }
])

// 最近活动
const recentActivities = ref([
  {
    content: '登录系统',
    time: '2024-02-20 10:00:00',
    type: 'primary'
  },
  {
    content: '更新个人信息',
    time: '2024-02-19 15:30:00',
    type: 'success'
  },
  {
    content: '查看文档',
    time: '2024-02-19 14:00:00',
    type: 'info'
  }
])

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await axios.get('/api/user/info')
    userInfo.value = response.data
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 处理功能点击
const handleFeatureClick = (feature) => {
  router.push(feature.route)
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.user-home {
  padding: 20px;
}

.user-card {
  text-align: center;
}

.user-info {
  padding: 20px 0;
}

.user-info h2 {
  margin: 10px 0 5px;
  color: var(--el-text-color-primary);
}

.user-info p {
  margin: 0;
  color: var(--el-text-color-secondary);
}

.user-stats {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--el-border-color-light);
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.stat-item .label {
  color: var(--el-text-color-secondary);
}

.stat-item .value {
  font-weight: bold;
  color: var(--el-text-color-primary);
}

.feature-card {
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card h3 {
  margin: 10px 0 5px;
  color: var(--el-text-color-primary);
}

.feature-card p {
  margin: 0;
  color: var(--el-text-color-secondary);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-4 {
  margin-top: 20px;
}
</style> 